<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Eggs</title>
	</head>
	<style>
	#canvas {
		background-color: black;
		display: table-cell
	}

	#gravityButton {
		position: absolute;
		left: 480px;
		top: 30px;
		width: 100px;
		height: 55px;
		text-align: center;
		vertical-align: middle;
		background: rgba(255,255,255,0.4);
		border-style: solid; border-width: 2px;
    	border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
		font-size: 25px;
		font-family: Candara;
	}

	#gravityButton a {
		position: relative;
		top: 27%;
		color: white;
	}

	#gravityButton:hover a {
		color: lightblue;
	}

	#levelInfo {
		position: absolute;
		left: 30px;
		top: 30px;
		width: 90px;
		height: 55px;
		text-align: center;
		vertical-align: middle;
		background: rgba(255,255,255,0.2);
		border-style: solid; border-width: 2px;
		font-size: 25px;
		font-family: Candara;
	}

	#levelInfo a {
		position: relative;
		top: 27%;
		color: white;
	}

	#menu {
		text-align: center;
		vertical-align: middle;
		width: 600px;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	#menu a {
	  background: #3498db;
	  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
	  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
	  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
	  background-image: -o-linear-gradient(top, #3498db, #2980b9);
	  background-image: linear-gradient(to bottom, #3498db, #2980b9);
	  border-radius: 28px;
	  font-family: Courier New;
	  color: #ffffff;
	  font-size: 20px;
	  padding: 11px 20px 10px 20px;
	  text-decoration: none;
	}

	#splash {
		position: absolute;
		display: none;
		top: 0; left: 0;
		width: 620px;
		height: 870px;
		text-align: center;
		font-size: 40px;
		color: violet;
		background: teal;
		font-family: Rockwell Extra Bold;
		opacity: 1;
	}

	#docText {
		position: absolute;
		left: 625px;
		top: 5px;
		width: 220px;
		height: 600px;
		text-align: center;
		vertical-align: middle;
		background: rgba(255,255,255,0.2);
		border-style: solid; border-width: 2px;
		font-size: 25px;
		font-family: Candara;
	}

	#docText a {
		position: relative;
		top: 25%;
		color: black;
	}

	#splash p {
		margin-top: 200px;
		vertical-align: middle;
		text-align: center;
	}

	</style>
	<body onload="init();">
		<div id="levelInfo">
			<a id="levelText">Level 1</a>
		</div>
		<span id="splash">
			<p>The easter bunny has <br/>
				lost his eggs!<br/><br/>
				Manipulate gravity <br/> 
				(top right button) <br/>
				to get them back to him!<br/><br/>
			<a href="#" onclick="SplashBeGone(); return false;">Got it!</a></p>
		</span>
		<div id="gravityButton">
			<a id="gravityText">UP</a>
		</div>
		<canvas id="canvas" width="600" height="800"></canvas>

		<div id="docText">
		<div style="position:absolute;left:50px;top:5%;">Level Info</div>
		<a id="docInfo">Lorem Ipsum...</a>
		</div>

		<div id="menu" width="600" height="400">
			<a id="nextLevel">Next Level</a>
			<a id="restartLevel">Restart Level</a>
		</div>

	</body>
	<script type="text/javascript" src="Box2dWeb-2.1.a.3.js"></script>
	<script type="text/javascript" src="eggs.js"></script>
</html>